import G2BaseChart from './G2BaseChart'

const PieChart2 = ({
  data,
  xField = 'item',
  yField = 'percent',
  total = 'total',
  width = 150,
  color = '#1890FF',
  smooth = true,
  showArea = false,
}) => {
  // console.log('pieChart2', data)
  const renderChart = (chart) => {
    chart.coordinate({ type: 'theta', outerRadius: 0.8, innerRadius: 0.5 })

    chart
      .interval()
      .data(data)
      .transform({ type: 'stackY' })
      .encode('y', 'percent')
      .encode('color', 'item')
      .legend('color', {
        position: 'bottom',
        layout: { justifyContent: 'center' },
        itemLabelFill: '#fff',
      })
      .scale('color', {
        type: 'ordinal',
        range: ['#FFD700', '#07C160'],
      })
      .label({
        position: 'outside',
        text: (data) => `${data.item}: ${(data.percent * 100).toFixed(0)}%`,
        fill: '#fff',
        connectorStroke: '#fff',
        transform: [{ type: 'exceedAdjust' }],
      })
      .tooltip((data) => ({
        name: data.item,
        value: `${(data.percent * 100).toFixed(0)}%`,
      }))

    chart
      .text()
      .style('text', '泊位总数')
      // Relative position
      .style('x', '50%')
      .style('y', '50%')
      .style('dy', -5)
      .style('fontSize', 10)
      .style('fill', '#FFF')
      .tooltip(false)
      .style('textAlign', 'center')

    chart
      .text()
      .style('text', total)
      // Relative position
      .style('x', '50%')
      .style('y', '50%')
      .style('dx', 0)
      .style('dy', 10)
      .style('fontSize', 10)
      .style('fill', '#FFF')
      .tooltip(false)
      .style('textAlign', 'center')

    chart.render()
  }

  return (
    <G2BaseChart data={data} width={150} height={150} render={renderChart} />
  )
}

export default PieChart2
